<template>
  <el-container id="votediv">
    <el-form :model="form1" ref="form1" class="mu-demo-form" label-width="100%" v-if="nowgroup===1" label-position="top" :rules="dRules">
      <h1>领导班子年度满意度测评</h1>
      <div class="groupdept">
        <el-form-item prop="dtopic1" label="1. 政治思想建设方面">
          <div style="line-height:150%">（以党的政治建设统领机关党建和业务工作，贯彻落实党中央决策部署和习近平总书记重要指示批示精神的情况）</div>
          <el-radio-group v-model="form1.dtopic1">
            <el-radio label="A">优秀</el-radio>
            <el-radio label="B">良好</el-radio>
            <el-radio label="C">一般</el-radio>
            <el-radio label="D">较差</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="dtopic2" label="2. 领导能力和工作能力方面" style="clear:both">
          <div style="line-height:150%">（落实部党组工作要求，发现和解决落实“两统一”核心职责、推动自然资源管理工作的情况）</div>
          <el-radio-group v-model="form1.dtopic2">
            <el-radio label="A">优秀</el-radio>
            <el-radio label="B">良好</el-radio>
            <el-radio label="C">一般</el-radio>
            <el-radio label="D">较差</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="dtopic3" label="3. 担当作为、履职尽责方面">
          <div style="line-height:150%">（结合自身实际，创造性开展工作的情况和成效）</div>
          <el-radio-group v-model="form1.dtopic3">
            <el-radio label="A">优秀</el-radio>
            <el-radio label="B">良好</el-radio>
            <el-radio label="C">一般</el-radio>
            <el-radio label="D">较差</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="dtopic4" label="4. 作风建设方面">
          <div style="line-height:150%">（遵守中央八项规定及其实施细则精神，贯彻党中央关于开展“基层减负年”各项要求，坚决反对“四风”特别是形式主义、官僚主义的情况）</div>
          <el-radio-group v-model="form1.dtopic4">
            <el-radio label="A">优秀</el-radio>
            <el-radio label="B">良好</el-radio>
            <el-radio label="C">一般</el-radio>
            <el-radio label="D">较差</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="dtopic5" label="5. 党风廉政建设方面">
          <div style="line-height:150%">（严格落实管党治党政治责任，持之以恒正风肃纪，深化部党组巡视问题整改，严格执纪精准问责，深入推进反腐败斗争的情况）</div>
          <el-radio-group v-model="form1.dtopic5">
            <el-radio label="A">优秀</el-radio>
            <el-radio label="B">良好</el-radio>
            <el-radio label="C">一般</el-radio>
            <el-radio label="D">较差</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="prevscreen" class="nextbtn" disabled>上一页</el-button>
          <el-button v-show="leaders&&leaders.length>0" type="primary" @click="nextscreen0"  class="nextbtn">下一页</el-button>
          <el-button v-show="!leaders||leaders.length===0" type="success" @click="submitticket0"  class="submitbtn">提交选票</el-button>
          <!-- <el-button type="success" @click="submitticket0"  class="submitbtn">提交选票</el-button> -->
        </el-form-item>
      </div>
    </el-form>
    <el-form :model="form2" ref="form2" class="mu-demo-form" label-width="100%" v-if="nowgroup>1&&showform" label-position="top" :rules="Rules2">
      <div v-for="(item,index) in leaders" :key="index" v-show="nowgroup===index+2">
        <div class="groupdept">
          <h1>局级干部年度考核测评 被投票人{{nowgroup-1}} <font v-if="leaders[nowgroup-2]">姓名：{{leaders[nowgroup-2].inname}} 编号：{{leaders[nowgroup-2].code}}</font></h1>
          <h3><span class="color1">德</span>政治品质</h3>
          <el-form-item prop="topic1" label="" :error="etext1">
            <el-radio-group v-model="form2.topic1[nowgroup-2]">
              <el-radio label="A">好</el-radio>
              <el-radio label="B">较好</el-radio>
              <el-radio label="C">一般</el-radio>
              <el-radio label="D">差</el-radio>
            </el-radio-group>
          </el-form-item>
          <h3><span class="color1">德</span>道德品行</h3>
          <el-form-item prop="topic2" label="" :error="etext2">
            <el-radio-group v-model="form2.topic2[nowgroup-2]">
              <el-radio label="A">好</el-radio>
              <el-radio label="B">较好</el-radio>
              <el-radio label="C">一般</el-radio>
              <el-radio label="D">差</el-radio>
            </el-radio-group>
          </el-form-item>
          <h3><span class="color2">能</span>政治能力</h3>
          <el-form-item prop="topic3" label="" :error="etext3">
            <el-radio-group v-model="form2.topic3[nowgroup-2]">
              <el-radio label="A">好</el-radio>
              <el-radio label="B">较好</el-radio>
              <el-radio label="C">一般</el-radio>
              <el-radio label="D">差</el-radio>
            </el-radio-group>
          </el-form-item>
          <h3><span class="color2">能</span>专业素养</h3>
          <el-form-item prop="topic4" label="" :error="etext4">
            <el-radio-group v-model="form2.topic4[nowgroup-2]">
              <el-radio label="A">好</el-radio>
              <el-radio label="B">较好</el-radio>
              <el-radio label="C">一般</el-radio>
              <el-radio label="D">差</el-radio>
            </el-radio-group>
          </el-form-item>
          <h3><span class="color2">能</span>组织领导</h3>
          <el-form-item prop="topic5" label="" :error="etext5">
            <el-radio-group v-model="form2.topic5[nowgroup-2]">
              <el-radio label="A">好</el-radio>
              <el-radio label="B">较好</el-radio>
              <el-radio label="C">一般</el-radio>
              <el-radio label="D">差</el-radio>
            </el-radio-group>
          </el-form-item>
          <h3><span class="color3">勤</span>精神状态</h3>
          <el-form-item prop="topic6" label="" :error="etext6">
            <el-radio-group v-model="form2.topic6[nowgroup-2]">
              <el-radio label="A">好</el-radio>
              <el-radio label="B">较好</el-radio>
              <el-radio label="C">一般</el-radio>
              <el-radio label="D">差</el-radio>
            </el-radio-group>
          </el-form-item>
          <h3><span class="color3">勤</span>工作作风</h3>
          <el-form-item prop="topic7" label="" :error="etext7">
            <el-radio-group v-model="form2.topic7[nowgroup-2]">
              <el-radio label="A">好</el-radio>
              <el-radio label="B">较好</el-radio>
              <el-radio label="C">一般</el-radio>
              <el-radio label="D">差</el-radio>
            </el-radio-group>
          </el-form-item>
          <h3><span class="color4">绩</span>履职情况</h3>
          <el-form-item prop="topic8" label="" :error="etext8">
            <el-radio-group v-model="form2.topic8[nowgroup-2]">
              <el-radio label="A">好</el-radio>
              <el-radio label="B">较好</el-radio>
              <el-radio label="C">一般</el-radio>
              <el-radio label="D">差</el-radio>
            </el-radio-group>
          </el-form-item>
          <h3><span class="color4">绩</span>工作成效</h3>
          <el-form-item prop="topic9" label="" :error="etext9">
            <el-radio-group v-model="form2.topic9[nowgroup-2]">
              <el-radio label="A">好</el-radio>
              <el-radio label="B">较好</el-radio>
              <el-radio label="C">一般</el-radio>
              <el-radio label="D">差</el-radio>
            </el-radio-group>
          </el-form-item>
          <h3><span class="color5">廉</span>一岗双责</h3>
          <el-form-item prop="topic10" label="" :error="etext10">
            <el-radio-group v-model="form2.topic10[nowgroup-2]">
              <el-radio label="A">好</el-radio>
              <el-radio label="B">较好</el-radio>
              <el-radio label="C">一般</el-radio>
              <el-radio label="D">差</el-radio>
            </el-radio-group>
          </el-form-item>
          <h3><span class="color5">廉</span>廉洁自律</h3>
          <el-form-item prop="topic11" label="" :error="etext11">
            <el-radio-group v-model="form2.topic11[nowgroup-2]">
              <el-radio label="A">好</el-radio>
              <el-radio label="B">较好</el-radio>
              <el-radio label="C">一般</el-radio>
              <el-radio label="D">差</el-radio>
            </el-radio-group>
          </el-form-item>
          <h3><span class="color6">总</span>总体评价</h3>
          <el-form-item prop="topic12" label="" :error="etext12">
            <el-radio-group v-model="form2.topic12[nowgroup-2]">
              <el-radio label="a">优秀</el-radio>
              <el-radio label="b">称职（合格）</el-radio>
              <el-radio label="c">基本称职（基本合格）</el-radio>
              <el-radio label="d">不称职（不合格）</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="prevscreen"  class="nextbtn">上一页</el-button>
            <el-button v-show="!submitbtnshow" type="primary" @click="nextscreen"  class="nextbtn">下一页</el-button>
            <el-button v-show="submitbtnshow" type="success" @click="submitticket"  class="submitbtn">提交选票</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </el-container>
</template>
<script>
export default {
  props: {
    leaders: [],
    myid: '',
    timestamp: ''
  },
  watch: {
    timestamp (val) {
      console.log('timestamp:' + val)
      this.formreset()
    },
    'form2.topic1': function () {
      this.etext1 = ''
      if (this.form2.topic1[this.nowgroup - 2]) {
        this.etext1 = ''
      } else {
        this.etext1 = '必填'
      }
    },
    'form2.topic2': function () {
      this.etext2 = ''
      if (this.form2.topic2[this.nowgroup - 2]) {
        this.etext2 = ''
      } else {
        this.etext2 = '必填'
      }
    },
    'form2.topic3': function () {
      this.etext3 = ''
      if (this.form2.topic3[this.nowgroup - 2]) {
        this.etext3 = ''
      } else {
        this.etext3 = '必填'
      }
    },
    'form2.topic4': function () {
      this.etext4 = ''
      if (this.form2.topic4[this.nowgroup - 2]) {
        this.etext4 = ''
      } else {
        this.etext4 = '必填'
      }
    },
    'form2.topic5': function () {
      this.etext5 = ''
      if (this.form2.topic5[this.nowgroup - 2]) {
        this.etext5 = ''
      } else {
        this.etext5 = '必填'
      }
    },
    'form2.topic6': function () {
      this.etext6 = ''
      if (this.form2.topic6[this.nowgroup - 2]) {
        this.etext6 = ''
      } else {
        this.etext6 = '必填'
      }
    },
    'form2.topic7': function () {
      this.etext7 = ''
      if (this.form2.topic7[this.nowgroup - 2]) {
        this.etext7 = ''
      } else {
        this.etext7 = '必填'
      }
    },
    'form2.topic8': function () {
      this.etext8 = ''
      if (this.form2.topic8[this.nowgroup - 2]) {
        this.etext8 = ''
      } else {
        this.etext8 = '必填'
      }
    },
    'form2.topic9': function () {
      this.etext9 = ''
      if (this.form2.topic9[this.nowgroup - 2]) {
        this.etext9 = ''
      } else {
        this.etext9 = '必填'
      }
    },
    'form2.topic10': function () {
      this.etext10 = ''
      if (this.form2.topic10[this.nowgroup - 2]) {
        this.etext10 = ''
      } else {
        this.etext10 = '必填'
      }
    },
    'form2.topic11': function () {
      this.etext11 = ''
      if (this.form2.topic11[this.nowgroup - 2]) {
        this.etext11 = ''
      } else {
        this.etext11 = '必填'
      }
    },
    'form2.topic12': function () {
      this.etext12 = ''
      if (this.form2.topic12[this.nowgroup - 2]) {
        this.etext12 = ''
      } else {
        this.etext12 = '必填'
      }
    }
  },
  data () {
    return {
      pagetitle: '',
      etext1: '',
      etext2: '',
      etext3: '',
      etext4: '',
      etext5: '',
      etext6: '',
      etext7: '',
      etext8: '',
      etext9: '',
      etext10: '',
      etext11: '',
      etext12: '',
      messagetext: '',
      showform: true,
      nextbtnshow: true,
      prevbtnshow: false,
      submitbtnshow: false,
      nowgroup: 1,
      dRules: {
        dtopic1: { required: true, message: '必填', trigger: 'change' },
        dtopic2: { required: true, message: '必填', trigger: 'change' },
        dtopic3: { required: true, message: '必填', trigger: 'change' },
        dtopic4: { required: true, message: '必填', trigger: 'change' },
        dtopic5: { required: true, message: '必填', trigger: 'change' }
      },
      Rules2: {
        topic1: { required: true, message: '必填', trigger: 'change' }
      },
      dtopic1: '',
      form1: {
        dtopic1: '',
        dtopic2: '',
        dtopic3: '',
        dtopic4: '',
        dtopic5: ''
      },
      form2: {
        topic1: [],
        topic2: [],
        topic3: [],
        topic4: [],
        topic5: [],
        topic6: [],
        topic7: [],
        topic8: [],
        topic9: [],
        topic10: [],
        topic11: [],
        topic12: []
      },
      texticon: '',
      topBarFixed: false
    }
  },
  methods: {
    formreset () {
      this.form1 = {
        dtopic1: '',
        dtopic2: '',
        dtopic3: '',
        dtopic4: '',
        dtopic5: ''
      }
      this.form2 = {
        topic1: [],
        topic2: [],
        topic3: [],
        topic4: [],
        topic5: [],
        topic6: [],
        topic7: [],
        topic8: [],
        topic9: [],
        topic10: [],
        topic11: [],
        topic12: []
      }
      this.etext1 = ''
      this.etext2 = ''
      this.etext3 = ''
      this.etext4 = ''
      this.etext5 = ''
      this.etext6 = ''
      this.etext7 = ''
      this.etext8 = ''
      this.etext9 = ''
      this.etext10 = ''
      this.etext11 = ''
      this.etext12 = ''
      this.nowgroup = 1
    },
    submitticket () {
      let j = 0
      for (let i = 1; i <= 12; i++) {
        if (this.form2['topic' + i][this.nowgroup - 2]) {
          this['etext' + i] = ''
        } else {
          this['etext' + i] = '必填'
          j++
        }
      }
      if (j === 0) {
        var _this = this
        let leadercode = []
        this.leaders.forEach(element => {
          leadercode.push(element.code)
        })
        console.log('leadercode:' + leadercode)
        // var personParams = { Page: 0, Pagenum: 20, Personname: '', Unitkey: '', Sortkey: '', Isace: true, timestamp: new Date().getTime() }
        let para = {
          persons: leadercode,
          dtopic1: this.form1.dtopic1,
          dtopic2: this.form1.dtopic2,
          dtopic3: this.form1.dtopic3,
          dtopic4: this.form1.dtopic4,
          dtopic5: this.form1.dtopic5,
          topic1: this.form2.topic1,
          topic2: this.form2.topic2,
          topic3: this.form2.topic3,
          topic4: this.form2.topic4,
          topic5: this.form2.topic5,
          topic6: this.form2.topic6,
          topic7: this.form2.topic7,
          topic8: this.form2.topic8,
          topic9: this.form2.topic9,
          topic10: this.form2.topic10,
          topic11: this.form2.topic11,
          topic12: this.form2.topic12
        }
        this.$http
          .post(`/api/ticket/add/` + this.myid, para)
          .then(function (response) {
            if (response.data.success === true) {
              _this.$emit('refreshevent')
              _this.$message({
                message: '成功投票' + response.data.message,
                type: 'success'
              })
              _this.formreset()
            } else {
              _this.$message({
                message: '投票失败：' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(function (error) {
            _this.showform = false
            _this.messagetext = '投票失败：' + error
          })
      } else {
        this.$message({
          message: '请全部填写完整',
          type: 'error'
        })
        // this.$toast.error('请全部填写完整')
      }
    },
    submitticket0 () {
      this.$refs.form1.validate().then((result) => {
        if (result) {
          var _this = this
          // var personParams = { Page: 0, Pagenum: 20, Personname: '', Unitkey: '', Sortkey: '', Isace: true, timestamp: new Date().getTime() }
          let para = {
            persons: [],
            dtopic1: this.form1.dtopic1,
            dtopic2: this.form1.dtopic2,
            dtopic3: this.form1.dtopic3,
            dtopic4: this.form1.dtopic4,
            dtopic5: this.form1.dtopic5,
            topic1: [],
            topic2: [],
            topic3: [],
            topic4: [],
            topic5: [],
            topic6: [],
            topic7: [],
            topic8: [],
            topic9: [],
            topic10: [],
            topic11: [],
            topic12: []
          }
          this.$http
            .post(`/api/ticket/add/` + this.myid, para)
            .then(function (response) {
              if (response.data.success === true) {
                _this.$emit('refreshevent')
                _this.$message({
                  message: '成功投票' + response.data.message,
                  type: 'success'
                })
                _this.formreset()
              } else {
                _this.$message({
                  message: '投票失败：' + response.data.message,
                  type: 'error'
                })
              }
            })
            .catch(function (error) {
              _this.showform = false
              _this.messagetext = '投票失败：' + error
            })
        } else {
        }
      }).catch((e) => {
        this.$message({
          showClose: true,
          message: '请全部填写完整',
          type: 'error',
          duration: 3000,
          offset: 80
        })
      })
    },
    nextscreen0 () {
      this.$refs.form1.validate().then((result) => {
        if (result) {
          if (this.leaders) {
            if (this.nowgroup <= this.leaders.length) {
              this.nowgroup++
              this.btnshow()
            }
          }
        } else {
        }
      }).catch((e) => {
        this.$message({
          showClose: true,
          message: '请全部填写完整',
          type: 'error',
          duration: 3000,
          offset: 80
        })
      })
    },
    nextscreen () {
      let j = 0
      for (let i = 1; i <= 12; i++) {
        if (this.form2['topic' + i][this.nowgroup - 2]) {
          this['etext' + i] = ''
        } else {
          this['etext' + i] = '必填'
          j++
        }
      }
      if (j === 0 && this.leaders) {
        if (this.nowgroup <= this.leaders.length) {
          this.nowgroup++
          this.btnshow()
        }
      } else {
        this.$message({
          showClose: true,
          message: '请全部填写完整',
          type: 'error',
          duration: 3000,
          offset: 80
        })
      }
    },
    prevscreen () {
      if (this.leaders) {
        if (this.nowgroup > 1) {
          this.nowgroup--
          this.btnshow()
        }
      }
    },
    btnshow () {
      if (this.nowgroup === 1) {
        this.prevbtnshow = false
      } else {
        this.prevbtnshow = true
      }
      if (this.nowgroup > this.leaders.length) {
        this.nextbtnshow = false
        this.submitbtnshow = true
      } else {
        this.nextbtnshow = true
        this.submitbtnshow = false
      }
    }
  }
}
</script>
<style>
#assessdetail .el-dialog__body{
  padding-top:10px !important;
}
.mu-demo-form {
  width: 100%;
  font-family: 'Microsoft YaHei','黑体';
}
.mu-demo-form h1{
  text-align: center;
  margin: 0;
  padding: 0;
}
#votediv .el-form-item__label{
  color:#000;
}
#votediv .el-radio__label{
  color:#000;
}
.mu-demo-form h2{
  margin: 0;
  padding: 0;
  text-align: center;
}
.mu-demo-form h3{
  text-align: left;
  padding:10px 20px 0 0;
  font-weight: bolder;
  margin: 0;
  float:left;
}
.mu-demo-form h3 span{
  padding:3px 8px 5px;
  margin:0 10px 0 0;
  color:#fff;
  border-radius:5px;
}
.mu-demo-form h3 span.color1{
  background: #FFD118;
}
.mu-demo-form h3 span.color2{
  background: #99cc00;
}
.mu-demo-form h3 span.color3{
  background: #cc9900;
}
.mu-demo-form h3 span.color4{
  background: #c00;
}
.mu-demo-form h3 span.color5{
  background: #f90;
}
.mu-demo-form h3 span.color6{
  background: #06c;
}
.groupdept{
  margin:0.2rem 0.2rem 0;
  padding:0.5rem;
}
.submittext{
  font-size: 0.6rem;
  color: #fff;
  font-family: 'Microsoft YaHei','黑体';
  text-align: center;
}
#iconok{
  width:5rem;
  height: 5rem;
  background:url(../assets/icon_submit.png) no-repeat;
  background-size:contain;
  background-position:center bottom;
  margin:1rem auto 0;
  z-index: 9999;
}
#iconerror{
  width:5rem;
  height: 5rem;
  background:url(../assets/icon_error.png) no-repeat;
  background-size:contain;
  background-position:center bottom;
  margin:1rem auto 0;
  z-index: 9999;
}
</style>
